<template>
  <PageDetail :visible.sync="detailVisible" :noFooter="true">
    <div class="custom-ant">
      <div class="header-info-box">
        <span>供应商名称：</span><span class="text">河南盛世机械工具集团有限公司</span>
        <span class="ml-30">供应商状态：</span><span class="text">合格供应商</span>
        <span class="ml-30">供应商编号：</span><span class="text">GYS20241208001</span>
      </div>
      <div class="content-box">
        <div class="content-left-box">
          <a-menu :defaultSelectedKeys="defaultSelectedKeys" @click="menuClick">
            <a-menu-item v-for="item in tabList" :key="item.value">{{ item.label }}</a-menu-item>
          </a-menu>
        </div>
        <div class="content-right-box">
          <keep-alive>
            <component ref="curComponent" :is="curComponent" />
          </keep-alive>
        </div>
      </div>
    </div>
  </PageDetail>
</template>

<script>
import BaseInfo from '@views/supplier-manage/effect/components/BaseInfo.vue';
import QualificationCertificate from '@views/supplier-manage/effect/components/QualificationCertificate.vue';
import AdmittanceInfo from '@views/supplier-manage/effect/components/AdmittanceInfo.vue';
import CooperationAgreement from '@views/supplier-manage/effect/components/CooperationAgreement.vue';
import PerformanceInfo from '@views/supplier-manage/effect/components/PerformanceInfo.vue';
import SupplierPortrait from '@views/supplier-manage/effect/components/SupplierPortrait.vue';

export default {
  name: 'EffectDetail',
  components: {
    BaseInfo,
    QualificationCertificate,
    AdmittanceInfo,
    CooperationAgreement,
    PerformanceInfo,
    SupplierPortrait,
  },
  data() {
    return {
      detailVisible: false,
      curMenuValue: '1',
      defaultSelectedKeys: ['1'],
      tabList: [
        { label: '基础档案', value: '1' },
        { label: '资质证件', value: '2' },
        { label: '准入信息', value: '3' },
        { label: '合作协议', value: '4' },
        { label: '绩效数据', value: '5' },
        { label: '供应商画像', value: '6' },
      ]
    }
  },
  computed: {
    curComponent() {
      const componentEnum = {
        '1': BaseInfo,
        '2': QualificationCertificate,
        '3': AdmittanceInfo,
        '4': CooperationAgreement,
        '5': PerformanceInfo,
        '6': SupplierPortrait,
      };
      return componentEnum[this.curMenuValue];
    }
  },
  methods: {
    open() {
      this.detailVisible = true;
    },
    menuClick({ key }) {
      this.curMenuValue = key || '1'
    }
  }
}
</script>

<style lang="less" scoped>
.header-info-box {
  height: 60px;
  line-height: 60px;
  border-radius: 8px;
  background-color: rgba(240, 250, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 16px;
  box-shadow: 0px 3px 8px 0px rgba(80, 135, 236, 0.2);

  padding: 0 25px;
  margin-bottom: 4px;
  .text {
    font-weight: bold;
  }
}

.content-box {
  display: flex;
  background-color: #fff;
  .content-left-box {
    // flex: 0 0 auto;
    width: 120px;
    border-radius: 0px 0px 8px 8px;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
    
    z-index: 2;
  }
  .content-right-box {
    // flex: 1 1 auto;
    width: calc(100% - 120px);
  }
}
</style>